<template>
  <div class="sgh-table">
    <div class="table-head">
      <table cellspacing="0" cellpadding="0">
        <colgroup>
          <col style="width: 80px" />
          <col />
        </colgroup>
        <thead>
          <th>用户名</th>
          <th>部门</th>
          <th>电话号码</th>
          <th>登录名</th>
          <th></th>
        </thead>
      </table>
    </div>
    <div class="table-body">
      <table cellspacing="0" cellpadding="0">
        <colgroup>
          <col style="width: 80px" />
          <col />
        </colgroup>
        <tbody>
          <tr
            v-for="(user, index) in tData"
            :key="index"
            @click.stop="_edit(user.id)"
          >
            <td>{{ user.cn }}</td>
            <td>{{ user.dpart_name }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.uname }}</td>
            <td>
              <span class="iDel" @click.stop="_del(user.id)">
                <svg
                  t="1608111369129"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2551"
                >
                  <path
                    d="M519.620465 0c-103.924093 0-188.511256 82.467721-192.083349 185.820279H85.015814A48.91386 48.91386 0 0 0 36.101953 234.686512a48.91386 48.91386 0 0 0 48.913861 48.866232h54.010046V831.345116c0 102.852465 69.822512 186.844279 155.909954 186.844279h439.200744c86.087442 0 155.909953-83.491721 155.909954-186.844279V284.100465h48.91386a48.91386 48.91386 0 0 0 48.913861-48.890046 48.91386 48.91386 0 0 0-48.913861-48.866233h-227.756651A191.559442 191.559442 0 0 0 519.620465 0z m-107.234232 177.080558c3.548279-49.771163 46.627721-88.540279 99.851907-88.540279 53.224186 0 96.327442 38.745302 99.351813 88.540279h-199.20372z m-111.997024 752.044651c-30.981953 0-65.083535-39.15014-65.083535-95.041488V287.744h575.488v546.839814c0 55.915163-34.077767 95.041488-65.059721 95.041488H300.389209v-0.500093z"
                    fill="#D81E06"
                    p-id="2552"
                  ></path>
                  <path
                    d="M368.116093 796.814884c24.361674 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.908465-48.818605-44.27014-48.818604-24.33786 0-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.293954 48.818605z m154.933581 0c24.361674 0 44.293953-21.670698 44.293954-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.293954-48.818604-24.33786 0-44.27014 21.670698-44.270139 48.818604v278.623256c0 27.147907 19.932279 48.818605 44.293953 48.818605z m132.810419 0c24.33786 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.27014-48.818604s-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.27014 48.818605z"
                    fill="#D81E06"
                    p-id="2553"
                  ></path>
                </svg>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: ["tData"],
  methods: {
    _del(id) {
      this.$emit("del", id);
      this.$emit("update");
    },
    _edit(id) {
      this.$emit("edit", id);
    },
  },
};
</script>

<style lang="scss">
$font-color: #999;
$theme-green-color: #48aa4e;
$border-gray-color: #474747;
$part-bg-color: #2d3838;
.sgh-table {
  .table-head {
    table {
      width: 100%;
      thead {
        color: #ccc;
        background-color: rgba($font-color, 0.2);
        th {
          font-weight: normal;
          font-size: 12px;
          text-align: left;
          padding: 8px 0 8px 10px;
        }
      }
    }
  }
  .table-body {
    width: 100%;
    height: calc(80vh - 40px);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }

    &::-webkit-scrollbar-track {
      border-radius: 0;
      background: $part-bg-color;
    }
    table {
      width: 100%;
      tbody {
        color: $font-color;
        font-size: 8px;
        overflow-y: scroll;
        tr {
          td {
            border-bottom: 1px solid rgba($border-gray-color, 0.5);
            padding: 8px 0 8px 10px;
            text-align: left;
            .iDel {
              visibility: hidden;
              svg {
                height: 15px;
                width: 15px;
                path {
                  fill: $theme-green-color;
                }
              }
            }
          }
          &:hover {
            cursor: pointer;
            background-color: rgba($font-color, 0.1);
            color: $theme-green-color;
            .iDel {
              visibility: visible;
            }
          }
        }
      }
    }
  }
  th,
  td {
    &:nth-child(1) {
      width: 25%;
    }
    &:nth-child(2) {
      width: 25%;
    }
    &:nth-child(3) {
      width: 25%;
    }
    &:nth-child(4){
      width: auto;
    }
    &:last-child {
      width: 5%;
    }
  }
}
</style>